<template>
  <div class="login-bg">
    <div class="login-head">
      <div class="login-head-box">
        <img src="../assets/images/logos.png" style="vertical-align:middle;width:103px; padding-left:89px;" />
        <span class="login-title">微宠医生管理平台</span>
      </div>
    </div>
    <div class="login-panel">
      <div class="login-window">
        <div style="margin-top:20px;margin-bottom:20px">
          <span style="color: #00a9ff;font-size:24px">登录</span>
        </div>
        <el-form ref="doctor" :model="doctor">
          <el-form-item label="用户名" class="bule-item" label-position="left" label-width="60px" size="small">
            <el-input v-model="doctor.username" placeholder="请输入用户名" size="small" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="密码" class="bule-item" label-position="left" label-width="60px">
            <el-input type="password" v-model="doctor.password" placeholder="请输入密码" size="small" style="width:80%"></el-input>
          </el-form-item>
          <div class="text-center">
            <el-button class="login-btns" @click="login">登陆</el-button>
          </div>
        </el-form>
      </div>
    </div>
   <div class="login-foot">
      <div class="column" style="margin-right:160px;width:92px;">
        <span class="bold foot-head-line">微宠医生</span>
        <ul>
          <li>在线问诊</li>
          <li>挂号预约</li>
          <li>报告解读</li>
        </ul>
      </div>
      
      <div class="column" style="margin-right:20px;width:91px;">
        <span class="bold foot-head-line">医疗保障</span>
        <ul>
          <li>宠物保险</li>
          <li>医疗服务包</li>
          <li>检测服务包</li>
        </ul>
      </div>
      <div class="column" style="margin-right:20px;width:91px;">
        <span class="bold foot-head-line">会员管理</span>
        <ul>
          <li>身份档案</li>
          <li>就医问诊记录</li>
          <li>医疗服务管理</li>
        </ul>
      </div>      
      <div class="column-last">        
        <ul >
        <li><span class="bold foot-head-line">合作伙伴</span></li>
        <li><img src="../assets/images/5.png" style="vertical-align:middle;line-height:100px;width:110px;" /></li>
        <li><img src="../assets/images/11.png" style="vertical-align:middle;line-height:100px;width:88px;" /></li>
        <li><img src="../assets/images/7.png" style="vertical-align:middle;line-height:100px;width:77px;" /></li>
        <li><img src="../assets/images/3.png" style="vertical-align:middle;line-height:100px;width:89px;" /></li>
        <li><img src="../assets/images/6.png" style="vertical-align:middle;line-height:100px;width:67px;" /></li>
        <li><img src="../assets/images/4.png" style="vertical-align:middle;line-height:100px;width:67px;" /></li>
        <li><img src="../assets/images/10.png" style="vertical-align:middle;line-height:100px;width:93px;" /></li>        
        <li><img src="../assets/images/9.png" style="vertical-align:middle;line-height:100px;width:45px;" /></li>
        <li><img src="../assets/images/8.png" style="vertical-align:middle;line-height:100px;width:92px;" /></li>
        <li><img src="../assets/images/1.png" style="vertical-align:middle;line-height:100px;width:58px;"/></li>
        </ul>
      </div>
    </div>
  </div>

</template>
<style>
.bule-item .el-form-item__label {
  color: #00a9ff;
  font-size: 14px;
}
.foot-head-line {
  font-size: 16px;
}
</style>
<script>
export default {
  
  name: 'Login',
  data() {
    return {
      doctor: {
        username: '',
        password: ''
      }
    }
  },

  methods: {
    login() {
      if (this.doctor.username == '' || this.doctor.password == '') {
        this.$message({
          message: '用户名或密码不能空!',
          type: 'error'
        })
        return
      }
      this.axios
        .post('/auth/doctor/login', {
          username: this.doctor.username,
          password: this.doctor.password
        })
        .then(response => {          
          if (response.data.code == 200) { 
            this.$store
              .dispatch('logined', response.data.data.token)
              .then(() => {
                this.$message({
                  message: response.data.msg,
                  type: 'success'
                })
                this.$router.push({ name: 'ConsultationOrder' })
              })
          } else {
            this.$message({
              message: response.data.msg,
              type: 'error'
            })
          }
        })
    },    
  }
}
</script>